<template>
  <base-group :value="myValue" @add="handleAdd" @remove="handleRemove" :disabled="disabled" :max-item="maxItem">
    <template scope="scope">
      <el-input v-bind="$props" :value="scope.item"  v-bind:style="{width: width + 'px'}"
        :minlength="minlength" :maxlength="maxlength" 
        @change="handleChange(scope.index,$event)" class="input-middle"/>
    </template>
  </base-group>
</template>
<script>

  import * as ui from 'l-element'
  import BaseGroup from '@/modules/components/BaseGroup'
  export default {
    components: {
      BaseGroup
    },
    props: {
      ...ui.default.Input.props, // 继承Input的所有属性
      ...BaseGroup.props,
      value: {},
      minlength: {
        type: Number
      },
      maxlength: {
        type: Number
      },
      width: {
        type: Number,
        default: 290
      }
    },
    watch: {
      value (value) {
        this.myValue = value
      }
    },
    data () {
      let myValue = this.value
      if (!this.value || this.value.length === 0) {
        myValue = ['']
      }
      return {
        myValue
      }
    },
    methods: {
      handleChange (index, value) {
        this.myValue[index] = value
        this.$emit('change', this.myValue).$emit('input', this.myValue)
      },
      handleAdd (index) {
        this.myValue.push('')
      },
      handleRemove (index) {
        this.myValue.splice(index, 1)
        this.$emit('change', this.myValue).$emit('input', this.myValue)
      }
    }
  }
</script>

<style lang="scss">
    @import '~styles/var.scss';
</style>
